<script setup lang="ts">
import { reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { InternalRuleItem, Value } from "async-validator";
import { useRouter } from "vue-router";

const router = useRouter();
const isRegister = ref(false); // 用来控制显示注册表单
// 定义 vue 响应式数据
const formModel = reactive<{
  account: string; // 账户
  password: string; // 密码
}>({
  account: "",
  password: ""
});

const registerFormModel = reactive<{
  account: string; // 账户
  password: string; // 密码
}>({
  account: "",
  password: ""
});

// 存储注册信息
let registeredAccount: string | null = null;
let registeredPassword: string | null = null;

// 表格引用对象
const formRef = ref<FormInstance>();
const registerFormRef = ref<FormInstance>();

// 打开控制台
const onOpenDevTools = () => {
  // invoke("open_devtools");
};

// 提交登录表单
const onSubmit = async () => {
  const validate = await formRef.value?.validate();
  if (!validate) {
    return;
  }

  // 校验账号和密码
  if (formModel.account === registeredAccount && formModel.password === registeredPassword) {
    router.push("/quotes");
    console.log(formModel); // 输出登录表单数据
  } else {
    alert("账号或密码错误");
  }
};

// 提交注册表单
const onRegisterSubmit = async () => {
  const validate = await registerFormRef.value?.validate();
  if (!validate) {
    return;
  }

  // 将注册信息保存在内存中
  registeredAccount = registerFormModel.account;
  registeredPassword = registerFormModel.password;

  alert("注册成功！");
};

// 校验密码长度
const passwordLengthValidator = (rule: InternalRuleItem, value: Value, callback: (error?: string | Error) => void) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error("密码长度不能小于 6"));
  }
};
</script>

<template>
  <div class="qq-login-page">
    <!-- 登录表单 -->
    <div class="qq-login-wrapper" v-if="!isRegister">
      <div class="qq-login-header">
        <img src="https://qlogo2.store.qq.com/qzone/123456789/123456789/100" alt="QQ Logo" class="qq-logo" />
        <h2>QQ 登录</h2>
      </div>
      <div class="form-wrapper">
        <el-form ref="formRef" :model="formModel">
          <el-form-item prop="account" label="账号" :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]">
            <el-input v-model="formModel.account" placeholder="请输入用户名/手机号" />
          </el-form-item>

          <el-form-item prop="password" label="密码" :rules="[ { required: true, message: '密码不能为空', trigger: 'blur' }, { required: true, validator: passwordLengthValidator, trigger: 'blur' }]">
            <el-input type="password" v-model="formModel.password" placeholder="请输入密码" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="register-link">
        <span @click="isRegister = true">没有账号? 去注册</span>
      </div>
    </div>

    <!-- 注册表单 -->
    <div class="qq-login-wrapper" v-else>
      <div class="qq-login-header">
        <img src="https://qlogo2.store.qq.com/qzone/123456789/123456789/100" alt="QQ Logo" class="qq-logo" />
        <h2>QQ 注册</h2>
      </div>
      <div class="form-wrapper">
        <el-form ref="registerFormRef" :model="registerFormModel">
          <el-form-item prop="account" label="账号" :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]">
            <el-input v-model="registerFormModel.account" placeholder="请输入用户名/手机号" />
          </el-form-item>

          <el-form-item prop="password" label="密码" :rules="[ { required: true, message: '密码不能为空', trigger: 'blur' }, { required: true, validator: passwordLengthValidator, trigger: 'blur' }]">
            <el-input type="password" v-model="registerFormModel.password" placeholder="请输入密码" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onRegisterSubmit">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="register-link">
        <span @click="isRegister = false">已有账号? 去登录</span>
      </div>
    </div>

    <!-- 控制台按钮 -->
    <el-button type="primary" @click="onOpenDevTools">打开控制台</el-button>
  </div>
</template>

<style lang="scss" scoped>
.qq-login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('./xingkong.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
}

.qq-login-wrapper {
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.qq-login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.qq-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

h2 {
  font-size: 24px;
  margin: 0;
  color: #333;
}

.form-wrapper {
  width: 300px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
  margin-top: 10px;
}

.register-link {
  margin-top: 10px;
  cursor: pointer;
  color: #007bff;
}

.register-link:hover {
  text-decoration: underline;
}
</style>
